<template>
  <div class="Home">
    <div class="detail">
      <div class="nav">
        <van-nav-bar
          title="商品详情页"
          left-text="返回"
          left-arrow
          @click-left="back"
        >
          <template #right>
            <van-icon
              name="cart-o"
              :badge="count>0 ? count:''"
              @click="viewBag"
              color="#1989fa"
            />
          </template>
        </van-nav-bar>
      </div>
      <div class="pic">
        <img :src="detailProductData.large_img" alt="" class="auto" />
      </div>
      <div class="detail-desc">
        <!-- 商品名称价格 -->
        <div class="textbox1">
          <div class="box1left">
            <div class="name">{{ detailProductData.name }}</div>
            <div class="enname">{{ detailProductData.enname }}</div>
          </div>
          <div class="box1right">
            <div class="price">￥{{ detailProductData.price }}</div>
          </div>
        </div>

        <!-- 商品规格 -->
        <div class="textbox2">
          <div class="textbox2rules" v-for="(item, index) in pros" :key="index">
            <div class="rulestitle">{{ item.title }}</div>
            <div class="rulesitem" v-for="(i, j) in item.subRulesData" :key="j">
              <div
                class="rulesitems"
                @click="toggle(item, j)"
                :class="{ abc: item.activeIndex == j }"
              >
                {{ i.title }}
              </div>
            </div>
          </div>
        </div>

        <!-- 选择数量 -->
        <div class="count">
          <div class="count-desc">选择数量</div>
          <div class="add">
            <van-stepper
              v-model="value"
              theme="round"
              button-size="22"
              disable-input
            />
          </div>
        </div>

        <!-- 商品描述 -->
        <div class="prodes">
          <van-tabs v-model="active" animated swipeable>
            <van-tab title="商品描述">
              <div>
                <div
                  class="destext"
                  v-for="(item, index) in detailProductData.desc"
                  :key="index"
                >
                  {{ index + 1 }}、{{ item }}
                </div>
              </div>
            </van-tab>

            <!-- 评论 -->
            <van-tab title="用户评价">
              <div class="desc">
                <div class="pl">
                  <div class="pl-title">评价</div>
                  <div class="pl-title" @click="getReview(pid)">查看全部</div>
                </div>

                <div
                  class="userpl"
                  v-for="(item, index) in plData"
                  :key="index"
                >
                  <div class="user-img">
                    <img class="auto" :src="item.userImg" alt="" />
                  </div>
                  <div class="user-content">
                    <div class="userInfo">
                      <div class="user-name">{{ item.userName }}</div>
                      <div class="pl-time">{{ item.time }}</div>
                    </div>
                    <div class="user-desc">{{ item.desc }}</div>
                    <div
                      class="desc-img"
                      :class="{ fl: item.plImg.length > 1 }"
                      v-for="(i, j) in item.plImg"
                      :key="j"
                    >
                      <img :src="i" alt="" width="200px" height="auto" />
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="猜你喜欢">
              <div class="menuproductList-right">
                <div
                  class="productList"
                  v-for="(a, b) in guesslike"
                  @click="viewDetail(a.pid, a.type)"
                  :key="b"
                >
                  <div class="productListbox">
                    <div class="productListimg">
                      <img
                        :src="a.smallImg"
                        alt=""
                        width="60px"
                        height="60px"
                      />
                    </div>
                    <div class="pdtext">
                      <div class="pdName">
                        <div class="productListname">{{ a.name }}</div>
                        <div class="productListenname">{{ a.enname }}</div>
                      </div>
                      <div class="productListprice">￥{{ a.price }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>

    <!-- 商品导航 -->
    <div>
      <van-goods-action>
        <van-goods-action-icon icon="bag" text="购物袋" color="blue" />
        <van-goods-action-icon
          icon="like"
          @click="proLike"
          :text="isLike ? '已收藏' : '未收藏'"
          :color="isLike ? 'blue' : 'gray'"
        />
        <van-goods-action-button
          color="#be99ff"
          type="warning"
          @click="addShopcart"
          text="加入购物车"
        />
        <van-goods-action-button
          color="#7232dd"
          type="danger"
          text="立即购买"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      count: "",
      active: 0,
      value: 1,
      pros: [],
      detailProductData: [],
      plData: [],
      pid: "",
      guesslike: [],
      isLike: false,
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: this.$cookies.get("TOKEN"),
    };
  },
  created() {
    let pids = this.$route.query.pid;
    this.pid = pids;
    console.log(pids);
    this.getProductDetailData(pids);
    this.pl();
    this.getProductData(this.$route.query.type);
    this.findlike();
    this.findShopbagCount()
  },
  methods: {
    //查询购物袋数量
    findShopbagCount() {
      let tokenString = this.$cookies.get("TOKEN");
      this.axios({
        method: "get",
        url: "/shopcartRows",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          tokenString,
        },
      }).then((res) => {
        this.count = res.data.result;
        console.log(res);
      });
    },
    //点击跳转购物袋
    viewBag() {
      this.$router.push({ path: "/Bag" });
    },
    //加入购物车
    addShopcart() {
      let selectRules = [];
      this.pros.forEach((item) => {
        selectRules.push(item.subRulesData[item.activeIndex].title);
      });
      let rules = selectRules.join("/");
      let str = `appkey=${this.appkey}&rule=${rules}&count=${this.value}&pid=${this.pid}&tokenString=${this.tokenString}`;
      this.axios({
        method: "post",
        url: "/addShopcart",
        data: str,
      }).then((res) => {
        if(res.data.code == 700){
          this.$router.push({path:"/Login"})
        }
        if (res.data.code == 3000) {
          this.$toast(res.data.msg);
        }
        console.log(res);
         this.findShopbagCount()
      });
    },
    //查询商品是否收藏
    findlike() {
      this.axios({
        method: "get",
        url: "/findlike",
        params: {
          appkey: this.appkey,
          pid: this.pid,
          tokenString: this.tokenString,
        },
      }).then((res) => {
        if ((res.data.code = 1000 && res.data.result.length != 0)) {
          this.isLike = true;
        }
        console.log(123, res);
      });
    },
    //收藏商品
    proLike() {
      let url = this.isLike ? "/notlike" : "/like";
      let tokenString = this.$cookies.get("TOKEN");
      let str = `appkey=${this.appkey}&pid=${this.pid}&tokenString=${tokenString}`;
      this.axios({
        method: "post",
        url,
        data: str,
      }).then((res) => {
        if (res.data.code == 800) {
          this.isLike = true;
          this.$toast(res.data.msg);
        }
        if (res.data.code == 900) {
          this.isLike = false;
          this.$toast(res.data.msg);
        }
        if (res.data.code == 700) {
          this.$toast.loading({
            message: "用户未登录",
            forbidClick: true,
            duration: 0,
          });
          setTimeout(() => {
            this.$router.push({ name: "Login" });
            this.$toast.clear();
          }, 1000);
        }
        console.log(res);
      });
    },
    //点击跳转商品详情
    viewDetail(pid, type) {
      console.log(pid, type);
      this.$router.push({ name: "Detail", query: { pid, type } });
      this.getProductDetailData(pid);
      this.pl();
      this.getProductData(type);
    },
    getProductData(type) {
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          key: "type",
          value: type,
        },
      }).then((res) => {
        console.log(res.data.result);
        for (let i = 0; i < res.data.result.length; i++)
          if (res.data.result[i].pid == this.$route.query.pid) {
            res.data.result.splice(i, 1);
          }
        this.guesslike = res.data.result;
        console.log("猜你喜欢", this.guesslike);
      });
    },
    //点击跳转全部评论页面
    getReview() {
      this.$router.push({ name: "Review", params: { pid: this.pid } });
    },
    //评论
    pl() {
      this.axios({
        method: "get",
        url: "https://www.fastmock.site/mock/66e08ac95023c910f5b33460d6846511/rx/rxkf",
      }).then((res) => {
        console.log(res);
        let proplData = [];
        res.data.data.result.forEach((item) => {
          if (item.id == this.$route.query.pid) {
            proplData.push(item);
          }
        });
        this.plData = proplData.splice(0, 3);
      });
    },
    back() {
      this.$router.push({ name: "Menu" });
    },
    //点击切换
    toggle(item, index) {
      console.log(item, index);
      item.activeIndex = index;
    },
    //获取商品详情
    getProductDetailData(pid) {
      this.axios({
        method: "get",
        url: "/productDetail",
        params: {
          pid,
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        },
      }).then((res) => {
        //数据在赋值之前处理
        //处理商品描述
        console.log(res);
        res.data.result[0].desc = res.data.result[0].desc.split(/\n/);
        this.detailProductData = res.data.result[0];
        console.log(this.detailProductData);

        //处理商品规格数据
        let allRulesData = [];
        let arrRulesData = ["cream", "milk", "sugar", "tem"];
        arrRulesData.forEach((item) => {
          if (!res.data.result[0][item]) {
            return;
          }
          let diyRulesData = {
            //规格标题
            title: res.data.result[0][`${item}_desc`],
            //默认选中规格
            activeIndex: 0,
            //子规格数据
            subRulesData: [],
          };
          //处理子规格数据
          let newsubRulesData = res.data.result[0][item].split(/\//);
          console.log(newsubRulesData);
          newsubRulesData.forEach((item) => {
            diyRulesData.subRulesData.push({ title: item });
          });
          allRulesData.push(diyRulesData);
          res.data.result[0].newData = allRulesData;
          this.pros = res.data.result[0].newData;
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-icon-cart-o:before {
  font-size: 18px;
}
.menuproductList-right {
  padding-bottom: 30px;
  overflow-y: scroll;
  flex: 1;
  flex-wrap: wrap;
  .productListbox {
    height: 80px;
    display: flex;
    background-color: #fff;
    margin: 10px;
    .productListimg {
      margin: 10px;
    }
    .pdtext {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .pdName {
        flex: 3;
        margin-top: 5px;
        font-size: 12px;
        .productListenname {
          margin-top: 5px;
          font-size: 10px;
        }
      }
      .productListprice {
        font-weight: bold;
        color: #001bb2;
        font-size: 16px;
        flex: 1;
        margin-left: auto;
      }
    }
  }
}
.fl {
  display: inline-block;
  img {
    margin-right: 10px;
    width: 120px;
    height: 120px;
  }
}
.desc {
  padding-bottom: 100px;
}
.userpl {
  display: flex;
  margin: 15px 0;
  .user-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    // background-color: skyblue;
  }
  .user-content {
    flex: 1;
    // background-color: pink;
  }
  .userInfo {
    display: flex;
    justify-content: space-between;
  }
  .user-desc {
    margin-top: 20px;
    line-height: 10px;
  }
  .desc-img {
    margin-top: 10px;
  }
}
.pl {
  display: flex;
  justify-content: space-between;
  height: 30px;
  align-items: center;
}
.Home {
  padding-bottom: 100px;
}
.destext {
  margin-top: 10px;
  color: #999999;
}
/deep/.van-stepper--round .van-stepper__plus {
  background-color: blue;
}
.count {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  height: 60px;
  align-items: center;
  border-bottom: 1px solid #cdcdcd;
  border-top: 1px solid #cdcdcd;
}
.textbox2 {
  margin-top: 30px;
  height: 110px;
  .textbox2rules {
    display: flex;
    margin-top: 10px;
    align-items: center;
    .rulestitle {
      width: 60px;
    }
    .rulesitem {
      display: flex;
      text-align: center;
      line-height: 30px;
      .rulesitems {
        width: 80px;
        height: 30px;
        background-color: #e8e8e8;
        margin-right: 10px;
        border-radius: 20px;
      }
      .abc {
        background-color: blue;
        color: white;
      }
    }
  }
}
.textbox1 {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .name {
    flex: 3;
    margin-top: 10px;
    font-size: 14px;
    color: #646566;
    font-weight: bold;
  }
  .enname {
    color: #9999a6;
    margin-top: 5px;
    font-size: 10px;
  }
  .price {
    font-weight: bold;
    color: #001bb2;
    font-size: 16px;
    flex: 1;
    margin-left: auto;
  }
}
.detail-desc {
  padding: 15px;
  margin: 0 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #fff;
  transform: translateY(20px);
}
.pic {
  height: 220px;
}
</style>